<template>
  <div class="sale-list pad">
    <div class="head">
      <span>销售员列表</span>
      <!-- <el-button @click="showAdd" type="primary" circle icon="el-icon-plus"></el-button> -->
    </div>
    <el-tabs type="border-card" class="m-t-b" @tab-click="handleClick">
      <el-tab-pane label="新版本推广">
        <div class="search m-t-b flex">
          <el-input placeholder="用户编号/用户昵称/推广备注" v-model="search.text" clearable @input="cancelSearch(1)">
            <el-select style="width: 120px;" slot="prepend" v-model="search.type">
              <el-option :value="1" label="用户编号"></el-option>
              <el-option :value="2" label="用户昵称"></el-option>
              <el-option :value="3" label="推广备注"></el-option>
            </el-select>
          </el-input>
          <el-button @click="handleSearch(1)" type="primary">
            <i class="el-icon-search"></i> 搜索
          </el-button>
        </div>
        <el-table class="m-t-b" border stripe :data="saleList" v-loading="loading">
          <el-table-column label="用户编号" prop="salesmanOpenid"></el-table-column>
          <el-table-column label="用户昵称" prop="nickname"></el-table-column>
          <el-table-column label="推广备注" prop="picDescription"></el-table-column>
          <el-table-column label="省">
            <template slot-scope="scope">
              {{scope.row.province || '暂无'}}
            </template>
          </el-table-column>
          <el-table-column label="市">
            <template slot-scope="scope">
              {{scope.row.city || '暂无'}}
            </template>
          </el-table-column>
          <el-table-column label="机构属性">
            <template slot-scope="scope">
              {{scope.row.property | propertyFilter}}
            </template>
          </el-table-column>
          <el-table-column label="二维码">
            <template slot-scope="scope">
              <img @click="preview(scope.row.pic)" :src="scope.row.pic" style="width: 140px; height: 140px; cursor: pointer;" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="seeDetail(scope.row, 1)">查看他(她)的推广</el-button>
              <el-button type="text" size="mini" @click="setLocation(scope.row)">设置地理信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          :current-page="curPage"
          @current-change="handlePagi"
          :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="旧版本推广">
        <div class="search m-t-b flex">
          <el-input placeholder="用户编号/用户昵称/推广备注" v-model="search1.text" clearable @input="cancelSearch(2)">
            <el-select style="width: 120px;" slot="prepend" v-model="search1.type">
              <el-option :value="1" label="用户编号"></el-option>
              <el-option :value="2" label="用户昵称"></el-option>
              <el-option :value="3" label="推广备注"></el-option>
            </el-select>
          </el-input>
          <el-button @click="handleSearch(2)" type="primary">
            <i class="el-icon-search"></i> 搜索
          </el-button>
        </div>
        <el-table class="m-t-b" border stripe :data="oldList" v-loading="loading1">
          <el-table-column label="用户编号" prop="userId"></el-table-column>
          <el-table-column label="用户昵称" prop="nickname"></el-table-column>
          <el-table-column label="推广备注" prop="picDescription"></el-table-column>
          <el-table-column label="二维码">
            <template slot-scope="scope">
              <img @click="preview(scope.row.pic)" :src="scope.row.pic" style="width: 140px; height: 140px; cursor: pointer;" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="seeDetail(scope.row, 2)">查看他(她)的推广</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handlePagiOld"
          :total="oldTotal">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="添加销售员" :visible.sync="showDialog">
      <el-form ref="sale" :rules="rules" :model="sale">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="sale.name" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="sale.idCard" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="addSale('sale')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看大图" :visible.sync="showPreviewDialog">
      <div style="text-align: center;">
        <img style="width: 430px; height: 430px;" :src="previewSrc"/>
      </div>
    </el-dialog>
    <el-dialog title="他(她)的推广信息" :visible.sync="showSaleDialog">
      <el-alert
        :title="'推广人昵称: ' + curUser.nickname"
        type="success"
        :closable="false">
      </el-alert>
      <el-alert
        style="margin: 10px 0 20px 0;"
        :title="'推广人编号: ' + curUser.openId"
        type="success"
        :closable="false">
      </el-alert>
      <el-table border stripe :data="saled" v-loading="saleLoading">
        <el-table-column label="推广备注">
          <template slot-scope="scope">
            {{scope.row.picDescription ? scope.row.picDescription : '暂无'}}
          </template>
        </el-table-column>
        <el-table-column label="用户编号" prop="userOpenid"></el-table-column>
        <el-table-column label="用户昵称" prop="nickname"></el-table-column>
        <el-table-column label="注册时间" prop="createDate"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goInfo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="showLocation" title="添加地理信息">
      <el-form :model="location" ref="location" label-position="top" :rules="locationRules">
        <el-form-item label="省" prop="province">
          <el-input v-model="location.province" clearable />
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-input v-model="location.city" clearable />
        </el-form-item>
        <el-form-item label="机构属性" prop="property">
          <el-select v-model="location.property">
            <el-option v-for="(item, i) in types" :key="i" :value="item.type" :label="item.name"></el-option>
          </el-select>
          <!-- <el-input v-model="location.property" clearable /> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideLackDialog">取 消</el-button>
        <el-button type="primary" @click="addLocationInfo('location')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSaleManList,
  getOldSaleList,
  getSaledList,
  updateQRLocation
} from '../api';
import { formatDate } from '../util';

export default {
  name: 'saleList',
  data () {
    return {
      search: {
        type: 1,
        text: ''
      },
      search1: {
        type: 1,
        text: ''
      },
      curIndex: 0,
      types: [
        { name: '私企', type: 1 },
        { name: '国企', type: 2 },
        { name: '央企', type: 3 },
        { name: '事业单位', type: 4 },
        { name: '市属学校', type: 5 },
        { name: '省属学校', type: 6 },
        { name: '部属学校', type: 7 },
        { name: '希望学校', type: 8 }
      ],
      showLocation: false,
      location: {
        province: '',	//String	省
        city: '',		//String	市
        property: ''		//int		属性
      },
      showDialog: false,
      loading: true,
      loading1: true,
      saleLoading: true,
      showPreviewDialog: false,
      showSaleDialog: false,
      previewSrc: '',
      curPage: 1,
      total: 0,
      curQr: '',
      tabType: 0,
      oldTotal: 0,
      oldList: [],
      saleList: [],
      saled: [],
      curUser: {
        nickname: '',
        openId: ''
      },
      sale: {
        name: '',
        idCard: ''
      },
      rules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      },
      locationRules: {
        province: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        property: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      },
      pageSize: 10
    }
  },
  methods: {
    handleSearch (type) {
      if (type === 1 && !this.$checkAuth('canSearchNewSale')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (type === 2 && !this.$checkAuth('canSearchOldSale')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (type === 1 && !this.search.text.trim()) {
        this.$message.error('搜索内容不能为空!');
        this.search.text = '';
        return
      };
      if (type === 2 && !this.search1.text.trim()) {
        this.$message.error('搜索内容不能为空!');
        this.search1.text = '';
        return
      };
      if (type === 1) {
        if (this.search.type === 1) { // 编号搜索
          this.fetchSaleMan(1, this.search.text, null, null)
        } else if (this.search.type === 2) { // 昵称搜索
          this.fetchSaleMan(1, null, this.search.text, null)
        } else if (this.search.type === 3) { // 推广备注搜索
          this.fetchSaleMan(1, null, null, this.search.text)
        }
      } else if (type === 2) {
        if (this.search1.type === 1) { // 编号搜索
          this.fetchOldList(1, this.search1.text, null, null)
        } else if (this.search1.type === 2) { // 昵称搜索
          this.fetchOldList(1, null, this.search1.text, null)
        } else if (this.search1.type === 3) { // 推广备注搜索
          this.fetchOldList(1, null, null, this.search1.text)
        }
      }
    },
    hideLackDialog () {
      this.showLocation = false
    },
    setLocation (data) {
      if (!this.$checkAuth('canSetLocation')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.location.province = data.province || '';
      this.location.city = data.city || '';
      this.location.property = data.property || '';
      this.curQr = data;
      this.showLocation = true
    },
    addLocationInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          updateQRLocation({
            saleqrId: this.curQr.saleqrId,
            ...this.location
          })
          .then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.showLocation = false;
              this.fetchSaleMan(this.curIndex)
            } else {
              this.$message.error(res.data.msg || '网络异常!')
            }
          })
          .catch(e => {
            this.$message.error('网络异常!')
          })
        } else {
          return false
        }
      })
    },
    goInfo (info) {
      let obj = {
        nickname: info.nickname,
        openid: info.userOpenid,
        createDate: info.createDate
      };
      sessionStorage.setItem('info', JSON.stringify(obj));
      this.$router.push('/user/info')
    },
    handleClick ({ index }) { // 标签页点击事件
      this.tabType = Number(index)
    },
    handlePagiOld (page) {
      if (this.search1.text.trim()) {
        if (this.search1.type === 1) { // 编号搜索
          this.fetchOldList(page, this.search1.text, null, null)
        } else if (this.search1.type === 2) { // 昵称搜索
          this.fetchOldList(page, null, this.search1.text, null)
        } else if (this.search1.type === 3) { // 推广备注搜索
          this.fetchOldList(page, null, null, this.search1.text)
        }
      } else {
        this.fetchOldList(page)
      }
    },
    seeDetail (data, type) {
      if (type === 1 && !this.$checkAuth('canSeeNewSaleDetail')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (type === 2 && !this.$checkAuth('canSeeOldSaleDetail')) {
        return this.$message.error('暂无对应操作权限!')
      };
      let info = {
        nickname: data.nickname,
        openId: data.salesmanOpenid || data.openId
      };
      sessionStorage.setItem('saleInfo', JSON.stringify(info));
      this.$router.push('/sale/detail/' + (data.saleqrId || null))
      // this.curUser.nickname = data.nickname;
      // this.curUser.openId = data.openId;
      // this.saled = [];
      // this.showSaleDialog = true;
      // this.fetchSaledList(data.openId)
    },
    preview (pic) {
      this.previewSrc = pic;
      this.showPreviewDialog = true
    },
    cancelSearch (type) {
      if (type === 1) {
        if (!this.search.text.trim()) {
          this.fetchSaleMan(1)
        }
      } else if (type === 2) {
        if (!this.search1.text.trim()) {
          this.fetchOldList(1)
        }
      }
    },
    handlePagi (page) {
      this.curIndex = page;
      if (this.search.text.trim()) {
        if (this.search.type === 1) { // 编号搜索
          this.fetchSaleMan(page, this.search.text, null, null)
        } else if (this.search.type === 2) { // 昵称搜索
          this.fetchSaleMan(page, null, this.search.text, null)
        } else if (this.search.type === 3) { // 推广备注搜索
          this.fetchSaleMan(page, null, null, this.search.text)
        }
      } else {
        this.fetchSaleMan(page)
      }
    },
    showAdd () {
      this.sale.name = ''
      this.sale.idCard = ''
      this.showDialog = true
    },
    fetchSaleMan (index, salesmanOpenid, nickname, picDescription) {
      this.loading = true;
      salesmanOpenid = salesmanOpenid || null;
      nickname = nickname || null;
      picDescription = picDescription || null;
      getSaleManList({
        index: index,
        count: this.pageSize,
        queryParam: {
          salesmanOpenid: salesmanOpenid, //用户id
          nickname: nickname, //用户昵称
          picDescription: picDescription //图片描述
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.totalRecord;
          this.saleList = res.data.data.list || []
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        };
        this.loading = false
      })
      .catch(e => {
        this.loading = false;
        this.$message.error('网络异常!')
      })
    },
    fetchSaledList (id) { // 获取推广人员的推广信息
      this.saleLoading = true;
      getSaledList(id)
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data || [];
          let len = list.length;
          for (let i = 0; i < len; i ++) {
            list[i].createDate = formatDate(list[i].createDate)
          };
          this.saled = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        };
        this.saleLoading = false
      })
      .catch(e => {
        this.saleLoading = false
        this.$message.error('网络异常!')
      })
    },
    addSale (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.sale)
        } else {
          return false
        }
      })
    },
    fetchOldList (index, openId, nickname, picDescription) {
      this.loading1 = true;
      openId = openId || null;
      nickname = nickname || null;
      picDescription = picDescription || null;
      getOldSaleList({
        index: index,
        count: this.pageSize,
        queryParam: {
            openId: openId, //用户id
            nickname: nickname, //用户昵称
            picDescription: picDescription//图片描述
          
        }
      })
      .then(res => {
        console.log(res);
        this.loading1 = false;
        if (res.data.code === 1) {
          this.oldTotal = res.data.data.totalRecord;
          this.oldList = res.data.data.list || []
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.loading1 = false;
        this.$message.error('网络异常!')
      })
    }
  },
  filters: {
    propertyFilter (type) {
      type = Number(type);
      let result = undefined;
      let types = [
        { name: '私企', type: 1 },
        { name: '国企', type: 2 },
        { name: '央企', type: 3 },
        { name: '事业单位', type: 4 },
        { name: '市属学校', type: 5 },
        { name: '省属学校', type: 6 },
        { name: '部属学校', type: 7 },
        { name: '希望学校', type: 8 }
      ];
      if (type) {
        for (let i = 0; i < types.length; i ++) {
          if (types[i].type === type) {
            result = types[i].name;
            break
          }
        }
      } else {
        result = '暂无'
      };
      return result
    }
  },
  created () {
    this.fetchSaleMan(1);
    this.fetchOldList(1)
  }
}
</script>
<style lang="scss">
  .sale-list {
    .cell {
      text-align: center;
    }
  }
</style>
